<style scoped>
  .vendorSales {
    margin-right: 15px;
    padding: 0 15px;
    background-color: white;
    height: 87.5vh;
    position: relative;
  }
  .vendorSales_top{
    display: flex;
    padding-top: 15px;
    white-space:nowrap;
  }
  .vendorSales_top2{
    height: 66px;
    padding-top: 15px;
    border-bottom: 2px solid #f4f4f4;
    display: flex;
    white-space:nowrap;
  }
  
  .vendorSales_top2 input:last-child{
    width: 390px;
  }
  .t_content{
    margin: 0 10px 0 8px;
    padding-top: 3px;
    }
    .t_content1{
      padding-top: 3px;
      margin: 0 6px 0 0;
    }
  .vendorSales input:focus{
    outline: none;
    border: 1px solid #017aff;
  }
  .inp{
    border: 1px solid #dbdbdb;
    border-radius: 3px;
    height: 30px;
    padding: 0 15px;
  }
  .inp2{
    width: 160px;
  }
  .inp1{
    width: 200px;
  }
  .inp3{
    width: 60px;
    margin-right: 10px;
  }
  .inp4{
    width: 90px;
    margin-left: -1px;
  }
  .inp5{
    width: 150px;
    margin:0 0 0 16px;
  }
  .a_color{
    color: #017aff;
  }
  .vendorSales_c{
    display: flex;
    width: 100%;
    height: 82%;
  }
    /*                   566464646*/
  .content1{
    width: 30%;
    border-right: 2px solid #f4f4f4;
    padding:2px 10px 0 0;
  }
  .content2{
    width: 70%;
    /* height: 100%; */
    padding-left: 10px;
  }
  .content1_1{
    display: flex;
    margin: 12px 0;
    overflow: hidden;
  }
  .c_button{
    width: 35px;
    height: 30px;
    margin:0 0 0 -1px;
    /* padding:4px 6px 0 0; */
    background: #dbdbdb;
    font-size: 13px;
    border: 0px solid #dbdbdb;
    outline: none;
  }
  .hand{
        cursor: pointer;
  }
  .c2{
    display: flex;
    height: 40px;
    margin-top: 10px;
    flex-wrap: nowrap;
  }
  .c2_2{
    display: flex;
    margin-left: 115px;
    height: 40px;
  }
  .c2_1{
    display: flex;
    height: 40px;
  }
  .c2_2 p{
    margin:8px 16px 0 0;
  }
  .check{
    width: 90px;
    height: 40px;
    border: 1px solid #d3cdcd;
    border-radius: 5px;
    padding: 8px 0 0 7px;
  }
  .c2_button{
    height: 25px;
    margin: 8px 5px 0 35px;
  }
  .c2_button1{
    height: 25px;
    margin: 8px 5px 0 0;
  }
  .date_1{
    margin: 3px 6px 0 0;
  }
  .remarks_1{
    margin:3px 6px 0 45px;
  }
  .footView span{
    float: left;
    margin-right: 48px;
    line-height: 6vh;
    font-size: 14px;
  }
  .footView span i{
    margin-right: 5px;
  }

  /* .popup{
    width:400px;height:200px;position:absolute;top:50%;left:50%;border:1px solid black
  } */
  .popup{
    width: 400px;
    height: 200px;
    border: 1px solid #dbdbdb;
    box-shadow: 0 2px 2px 2px #dbdbdb;
    z-index: 999;
    position: absolute;
    left: 50%;
    top: 50%;
    margin:-100px 0 0 -200px;
    background: white;
    /* display: block; */
  }
  .popup_t{
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 40px;
    background: rgb(244, 244, 244);
    padding: 8px 15px;
  }
  .popup_t p{
    font-weight: 700;
  }
  .popup_c{
    padding: 8px 15px;
  }
  .popup_button{
    margin: 5px 0 0 0;
    width: 94%;
    height: 30px;
    padding:0 10px;
    border: 1px solid#dbdbdb;
    border-radius: 3px;
  }
  .popup_b{
    margin: 10px 0 0 0;
    padding-left: 230px;
  }
  ._content{
    width: 100%;
    height: 32px;
    /* border: 1px solid black; */
    margin: 15px 0;
  }

</style>

<style>
  .vendorSales .el-input__icon{
    line-height: 30px;
  }
  .vendorSales .vendorSales_top .el-input__inner{
    height: 30px;
    /* width: 100px; */
  }
  .vendorSales .vendorSales_top .ph .el-input__inner{
    height: 30px;
    width: 160px;
  }
  .vendorSales .c_b .el-button{
    padding: 0;
  }
  .vendorSales_top2 input[data-v-0deda660]{
    width: 160px;
    height: 30px;
  }
  .vendorSales_top2 .el-date-editor.el-input__inner{
    width: 370px;
  }
  .vendorSales .content1_1 .el-input__inner{
    height: 30px;
  }
  .vendorSales .vendorSales_top .el-select__tags{
    top: 50%;
  }
  .vendorSales .vendorSales_top .el-input__inner{
    width: 160px;
  }
  .vendorSales .block .el-input__inner{
    height: 30px;
  }
  .vendorSales .block .el-input__icon{
    line-height: 23px;
  }
  .vendorSales .block .el-date-editor .el-range-separator{
    padding: 0;
    margin-top: -9px;
  }
  
  .vendorSales .el-pagination .el-select .el-input .el-input__inner , .vendorSales .el-pagination .el-select .el-input{
    width: 90px;
  }
  .vendorSales .el-pagination{
    float: right;
    margin-top: 5px;
  }
  .vendorSales .el-input--mini .el-input__inner{
    height: 23px;
  }
</style>


<template>
  <div class="vendorSales">
    
    <div class="vendorSales_top">

      <p class="t_content1">品牌</p>
      <el-select
        v-model="brandedName"
        multiple
        collapse-tags>
        <el-option
          v-for="item in brandedNameList"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>

      <p class="t_content">货号</p>
      <input class="inp inp2" type="text" v-model="kindsNumber">

      <p class="t_content">售价</p>
      <input class="inp inp2" type="text" v-model="sellingPrice">

      <p class="t_content">折数</p>
      <input class="inp inp2" type="text" v-model="discount">

      <p class="t_content">单价</p>
      <input class="inp inp2" type="text" v-model="onePrice">

      <p class="t_content">季度</p>
      <el-select
        v-model="quarter"
        multiple
        collapse-tags>
        <el-option
          v-for="item in quarterList"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>

      <p class="t_content">配货方式</p>
      <div class="ph">
      <el-select v-model="cooperateWay">
        <el-option
        v-for="item in cooperateWayList"
        :key="item.value"
        :label="item.label"
        :value="item.value">
        </el-option>
      </el-select>
      </div>

    </div>

    <div class="vendorSales_top2">
      <p class="t_content1">销货日期</p>
      <div class="block">
        <el-date-picker
          value-format="yyyy-MM-dd HH:mm:ss"
          v-model="dateList"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </div>
    </div>

    <div class="_content">
      <el-button icon="el-icon-search" type="primary" @click="search">查询</el-button>
      <el-button icon="el-icon-upload2" @click="exp('厂商销售')">导出</el-button>
    </div>

    <div class="vendorSales_c">
      <div class="content1">
        <el-table
          :data="tableData1"
          style="width: 100%"
          height="59vh"
          highlight-current-row
          show-summary
          :header-cell-style="{background:'#f4f4f4',padding:0,height:'40px'}"
          :cell-style="{padding:0,height:'36px'}">
          <el-table-column
            type="index"
            label="序号"
            width="50">
          </el-table-column>
          <el-table-column
            prop="kindsNumber"
            label="货号"
            width="160">
          </el-table-column>
          <el-table-column
            prop="colorNameNo"
            label="色码">
          </el-table-column>
          <el-table-column
            prop="sellingPrice"
            label="售价">
          </el-table-column>
          <el-table-column
            prop="onePrice"
            label="单价">
          </el-table-column>
          <el-table-column
            prop="sum"
            label="数量">
          </el-table-column>
          <el-table-column
            prop="money"
            label="金额">
          </el-table-column>
          <el-table-column
            prop="date"
            label="销货日期"
            width="180">
          </el-table-column>
          <el-table-column
            prop="brandedName"
            label="品牌"
            width="120">
          </el-table-column>
        </el-table>
        <el-pagination 
          small
          background 
          ref="paginationLeft"
          layout="prev, pager, next, jumper, sizes"
          :page-sizes="[20, 50, 100, 200]"
          :page-size="limitLeft"
          :page-count="pagesNumLeft"
          :total="dataLenLeft"
          @current-change="handleCurrentChangeLeft"
          @size-change="handleSizeChangeLeft">
        </el-pagination>
      </div>

      <div class="content2">
        <el-table
          id="outTable"
            :data="tableData2"
            style="width: 100%"
            height="59vh"
            highlight-current-row
            :header-cell-style="{background:'#f4f4f4',padding:0,height:'40px'}"
            :cell-style="{padding:0,height:'36px'}">
            <el-table-column
            type="index"
            label="序号"
            width="50">
          </el-table-column>
          <el-table-column
            prop="kindsNumber"
            label="货号"
            width="200">
          </el-table-column>
          <el-table-column
            prop="colorName"
            label="颜色">
          </el-table-column>
          <el-table-column
            prop="c05"
            label="05-XS">
          </el-table-column>
          <el-table-column
            prop="c07"
            label="07-S">
          </el-table-column>
          <el-table-column
            prop="c09"
            label="09-M">
          </el-table-column>
          <el-table-column
            prop="c11"
            label="11-L">
          </el-table-column>
          <el-table-column
            prop="c13"
            label="13-XL">
          </el-table-column>
          <el-table-column
            prop="c15"
            label="15-2L">
          </el-table-column>
          <el-table-column
            prop="c17"
            label="17-3L">
          </el-table-column>
          <el-table-column
            prop="c19"
            label="19-4L">
          </el-table-column>
          <el-table-column
            prop="c21"
            label="21-5L">
          </el-table-column>
          <el-table-column
            prop="c23"
            label="23-6L">
          </el-table-column>
          <el-table-column
            prop="f"
            label="F">
          </el-table-column>
          <el-table-column
            prop="sum"
            label="小计">
          </el-table-column>
          <el-table-column
            prop="sellingPrice"
            label="售价">
          </el-table-column>
          <el-table-column
            prop="onePrice"
            label="单价">
          </el-table-column>
          <el-table-column
            prop="brandedName"
            label="品牌">
          </el-table-column>
        </el-table>
        <el-pagination 
          small
          background 
          ref="paginationRight"
          layout="prev, pager, next, jumper, sizes"
          :page-sizes="[20, 50, 100, 200]"
          :page-size="limit"
          :page-count="pagesNum"
          :total="dataLen"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange">
        </el-pagination>
      </div>

    </div>

    <foot-view class="footView">
      <div slot="text">
        <span>数据库：{{jxQuarter}}</span>
        <!-- <span>记录数：{{amount}}</span> -->
      </div>
    </foot-view>

  </div>
</template>
<script>
import { manufacturerSell } from '../../../network/manufacturer'
import { getBranded } from '../../../network/branded'

import footView from '../../../components/FootView'

import today from '../../../components/mixins/today'
import enterUp from '../../../components/mixins/enterUp'
import outex from '../../../components/mixins/outexp'

export default {
  mixins: [today,enterUp,outex],
  created(){
    this.inpList = this.getInput()
    
    // 默认选之前一周
    this.dateList = [this.getLastWeek(),this.getNowTime()]

    // 品牌公司列表赋值
    getBranded({limit: 99999}).then(res => {
      let list = res.data.data
      list.forEach(e => {
        this.brandedNameList.push({value:e.name,label:e.name})
      })
    })
  },
  data(){
    return{
      inpList: [],
      // 总数据条数
      dataLenLeft: 0,
      // 总页码
      pagesNumLeft: 0,
      // 分页条数
      limitLeft: 20,
      // 当前页码
      currentPageLeft: 1,

      // 总数据条数
      dataLen: 0,
      // 总页码
      pagesNum: 0,
      // 分页条数
      limit: 20,
      // 当前页码
      currentPage: 1,

      brandedName: '',
      brandedNameList: [],
      kindsNumber: '',
      sellingPrice: '',
      discount: '',
      onePrice: '',
      quarter: '',
      quarterList: [],
      cooperateWay: '全部',
      cooperateWayList: [
        {value:'全部',label:'全部'},
        {value:'配货',label:'配货'},
        {value:'订货',label:'订货'},
        {value:'订断',label:'订断'},
        {value:'追断',label:'追断'}
      ],
      dateList: null,
      kinds: [],
      styleColor: [],
      tableData1: [],
      tableData2: [],

      amount: 0,
      jxQuarter: document.cookie.match(RegExp('jxQuarter'+'=([^;]+)'))[1],
    }
  },
  components: {
    footView,
  },
  methods: {
    search(){
      let str = ''
      if (this.brandedName.length>0) {
        for (let i = 0; i < this.brandedName.length; i++) {
          const e = this.brandedName[i]
          if (!i) {
            str = e
            continue
          }
          str = str+','+e
        }
      }
      
      let params = {
        brandedName: str,
        kindsNumber: this.kindsNumber,
        sellingPrice: this.sellingPrice,
        discount: this.discount,
        onePrice: this.onePrice,
        quarter: this.quarter,
        cooperateWay: this.cooperateWay == '全部' ? '' : this.cooperateWay,
        startTime: this.dateList ? this.dateList[0] : null,
        endTime: this.dateList ? this.dateList[1] : null
      }
      // console.log(params)
      manufacturerSell(params).then(res => {
        if (res.data.code == 200) {
          this.currentPage = 1
          this.currentPageLeft = 1
          this.$refs.paginationRight.internalCurrentPage = 1
          this.$refs.paginationLeft.internalCurrentPage = 1

          let d = res.data.data
          this.kinds = d.kinds
          this.styleColor = d.styleColor

          // 色码赋值，色码是颜色加尺码
          this.kinds.forEach(e => {
            e.colorNameNo = e.colorName + ' ' + e.size
            e.date = e.enteringTime.slice(0,10)
          })

          this.dataLen = this.styleColor.length
          this.dataLenLeft = this.kinds.length

          this.tableData1 = this.kinds.slice((this.currentPageLeft-1)*this.limitLeft,this.currentPageLeft*this.limitLeft)
          this.tableData2 = this.styleColor.slice((this.currentPageLeft-1)*this.limitLeft,this.currentPageLeft*this.limitLeft)
        }
      })
    },
    // 每页显示页数改变
    handleSizeChange(val){
      this.limit = val
      this.tableData2 = this.styleColor.slice((this.currentPage-1)*this.limit,this.currentPage*this.limit)
    },
    // 当前页改变
    handleCurrentChange(val){
      this.currentPage = val
      this.tableData2 = this.styleColor.slice((this.currentPage-1)*this.limit,this.currentPage*this.limit)
    },

    handleSizeChangeLeft(val){
      this.limitLeft = val
      this.tableData1 = this.kinds.slice((this.currentPageLeft-1)*this.limitLeft,this.currentPageLeft*this.limitLeft)
    },
    handleCurrentChangeLeft(val){
      this.currentPageLeft = val
      this.tableData1 = this.kinds.slice((this.currentPageLeft-1)*this.limitLeft,this.currentPageLeft*this.limitLeft)
    },
  },

}
</script>